<template>
	<view class="all">
		<u-tabs :list="list1" :scrollable="false" @change="tabs"></u-tabs>
		<view class="body">
			<view class="list" v-for="(item , index) in 4" :key="index">
				<view class="top flex_sp">
					<view class="left">
						待接单
					</view>
					<view class="right">
						服务护工：名称
					</view>
				</view>
				<view class="solid"></view>
				<view class="bot">
					<view class="one">
						<text class="s1">项目名称</text>
						<text class="s2">x1</text>
					</view>
					<view class="two flex_sp">
						<view class="left">
							服务时间2023-10-20
						</view>
						<view class="right">
							￥200
						</view>
					</view>
					<view class="three">
						<view class="box">
							联系客户
						</view>
						<view class="box">
							接单
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '待申诉',
				}, {
					name: '待审核'
				}, {
					name: '已审核'
				}],
				tab:0
			};
		},
		methods:{
			tabs(e){
				console.log(e.index);
				this.tab=e.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all{
		padding: 15px;
		min-height: 100vh;
		background-color: #f5f5f5;
		.body{
			margin: 20px 0;
			.list{
				margin: 10px 0;
				padding: 15px;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 10px;
				opacity: 1;
				.top{
					font-size: 14px;
					font-weight: 400;
					color: #333333;
				}
				.solid{
					width: 100%;
					height: 1px;
					background-color: #eeeeee;
					margin: 10px 0;
				}
				.bot{
					.one{
						margin: 5px 0;
						.s1{
							font-size: 16px;
							font-weight: bold;
							color: #333333;
						}
						.s2{
							font-size: 12px;
							font-weight: bold;
							color: #FB774B;
						}
					}
					.two{
						margin: 5px 0;
						.left{
							font-size: 12px;
							font-weight: 400;
							color: #999999;
						}
						.right{
							font-size: 15px;
							font-weight: bold;
							color: #FF575B;
						}
					}
					.three{
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.box{
							background: #FB774B;
							border-radius: 26px;
							font-size: 11px;
							font-weight: bold;
							color: #FFFFFF;
							text-align: center;
							padding: 5px 20px;
							margin: 0 5px;
						}
					}
				}
			}
		}
	}

</style>